<div class="calendar">
  <span (click)='openDatePicker()'>
    <input #dateText class="form-control input-width col-sm-8" type='text' value={{currDate}} disabled/>
  </span>
  <a class="iconfont icon-calendar"></a>
  <table id="wp-calendar" [ngClass]="{'show': !!showDp}">
    <caption>
      <i class='iconfont icon-xiangzuo' style='float:left' (click)='setPrevMonth()'></i>
      <label>{{currMonth}} {{currYear}}</label>
      <i class='iconfont icon-xiangyou' style='float:right;font-size: 22px;' (click)='setNextMonth()'></i>
    </caption>
    <thead>
    <tr>
      <th *ngFor="let day of daysofWeek">{{day}}</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let date of dates">
      <td *ngFor="let d of date" (click)='setDate(d)'
          [class.disabled]='d.disabled'
          [class.selDate]='d.selected'
          [class.empty]='d.empty'>{{d.date}}</td>
    </tr>
    </tbody>
  </table>
</div>

